<template>
  <div class="container">
    <div style="background-color: #2758bb">
      <nav-bar subTitle="数据资源目录">
        <template #navBar>
          <bar-box :tableData="tableData"></bar-box>
        </template>
      </nav-bar>
    </div>
    <div class="body">
      <template v-if="actionName === 'dataOverview'">
        <dataOverview></dataOverview>
      </template>
      <template v-else-if="actionName === 'dataCatalog'">
        <dataCatalog></dataCatalog>
      </template>
    </div>
  </div>
</template>
<script setup>
import {navData} from './data/data.js'
import NavBar from "@/components/navBar.vue";
import BarBox from "@/views/newEcoIndicators/components/barBox.vue";
import {reactive, ref, watch} from "vue";
import DataCatalog from "@/views/dataResourceCatalog/components/dataCatalog.vue";
import DataOverview from "@/views/dataResourceCatalog/components/dataOverview.vue";
import {useRoute} from 'vue-router'

const tableData = reactive(navData)
const actionName = ref('dataCatalog')
const route = useRoute()

watch(() => route.query.type, function (newVal) {
  actionName.value = newVal

}, {immediate: true})
</script>
<style scoped lang="scss">
.container {
  background-color: #ecf1f7;
}

.body {
  box-sizing: border-box;
  padding: 15px;
  background-color: #ecf1f7;
}
</style>
